<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html>
<head>

    <title>欢迎光临二手交易商城</title>
    <!--CSS-->
    <link rel="stylesheet" href="/sale/resources/css/styles.css"/>
    <style>

    </style>
    <!--Google Webfont -->
    <link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'/>
    <!--Javascript-->
    <script type="text/javascript" src="/sale/resources/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/sale/resources/js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="/sale/resources/js/jquery.easing.js"></script>
    <script type="text/javascript" src="/sale/resources/js/jquery.jcarousel.js"></script>
    <script type="text/javascript" src="/sale/resources/js/form_elements.js"></script>
    <script type="text/javascript" src="/sale/resources/js/custom.js"></script>
    <script type="text/javascript">
        function topay() {
            document.getElementById("login-form").submit();
        }

        function login() {
            window.location.href = '/sale/user/tologin';
        }
    </script>
    <!--[if lt IE 9]>
    <script src="js/html5.js"></script>
    <![endif]-->
    <!-- mobile setting -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<c:if test="${msg!=null}">
    <c:if test="${msg=='success'}">
        <script>
            alert("注册成功");
        </script>
    </c:if>
    <c:if test="${msg=='error'}">
        <script>
            alert("注册失败，请重新操作");
        </script>
    </c:if>
</c:if>
<div class="wrapper">
    <jsp:include page="common/top.jsp" flush="true"/>
    <div class="section_container">
        <!--Mid Section Starts-->
        <section>
            <div class="full_page">
                <h1>填写收货信息</h1>
                <!--CHECKOUT STEPS STARTS-->
                <div class="checkout_steps">
                    <ol id="checkoutSteps">
                        <li class="section allow active" id="opc-login">
                            <div class="step-title"><span class="number"></span>
                                <h2>填写收货信息</h2>
                            </div>
                            <div id="checkout-step-login">
                                <div class="col2-set">
                                    <div class="col-2">
                                        <h3>填写收货信息</h3>
                                        <form method="post" action="/sale/order/topay" id="login-form"/>
                                        <fieldset>
                                            <ul class="form-list">
                                                <li>
                                                    <label class="required"><em>*</em>请选择地址</label>
                                                    <div class="input-box">
                                                        <!-- 地址表格 -->
                                                        <form id="addressForm" action="/saveAddress" method="post">
                                                            <table class="address-table">
                                                                <thead>
                                                                <tr>
                                                                    <th>选择</th>
                                                                    <th>备注</th>
                                                                    <th>电话</th>
                                                                    <th>省/直辖市</th>
                                                                    <th>城市</th>
                                                                    <th>区</th>
                                                                    <th>详情地址</th>
                                                                    <th style="width: 100px;">操作</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                <c:forEach var="address" items="${addressList}"
                                                                           varStatus="status">
                                                                    <tr>
                                                                        <td>
                                                                            <input style="width: 10px;" type="radio"
                                                                                   name="selectedAddress"
                                                                                   value="${address.id}"
                                                                                   <c:if test="${address.defaultStatus == true || address.defaultStatus == 1}">checked</c:if>>
                                                                        </td>
                                                                        <td>${address.name}</td>
                                                                        <td>${address.phoneNumber}</td>
                                                                        <td>${address.province}</td>
                                                                        <td>${address.city}</td>
                                                                        <td>${address.region}</td>
                                                                        <td>${address.detailAddress}</td>

                                                                        <td style="vertical-align: middle;">
                                                                            <button class="button brown_btn_mini"
                                                                                    type="button" class="btn"
                                                                                    onclick="editAddress('${address.id}', '${address.phoneNumber}', '${address.name}')">
                                                                                编辑
                                                                            </button>

                                                                            <button type="button"
                                                                                    class="brown_btn_mini_red"
                                                                                    onclick="deleteAddress('${address.id}')">
                                                                                删除
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                </c:forEach>
                                                                </tbody>
                                                            </table>
                                                        </form>
                                                        <br/>
                                                        <!-- 编辑表单 -->
                                                        <div class="edit-form" id="editForm">
                                                            <form action="/saveAddress" method="post">
                                                                <input type="hidden" name="id" id="editId">
                                                                <label>电话:</label>
                                                                <input type="text" name="phoneNumber"
                                                                       id="editPhoneNumber" required>
                                                                <label>姓名:</label>
                                                                <input type="text" name="name" id="editName" required>
                                                                <p/>
                                                                <button type="submit" class="btn  brown_btn_mini">保存
                                                                </button>
                                                                <button type="button" class="btn  brown_btn_mini_red"
                                                                        onclick="cancelEdit()">取消
                                                                </button>
                                                            </form>
                                                        </div>
                                                        <br/>
                                                        <!-- 新增按钮 -->
                                                        <button type="button" class="btn  brown_btn_mini"
                                                                onclick="showAddForm()"
                                                                style="margin-top: 10px;">新增地址
                                                        </button>
                                                        <br/><br/>
                                                        <!-- 新增表单 -->
                                                        <div style="margin-top: 10px;" class="add-form" id="addForm">
                                                            <form action="/addAddress" method="post">
                                                                <label>电话:</label>
                                                                <input type="text" name="phoneNumber" required>
                                                                <label>姓名:</label>
                                                                <input type="text" name="name" required>

                                                                <p/>
                                                                <button type="submit" class="btn  brown_btn_mini">添加
                                                                </button>
                                                                <button type="button" class="btn  brown_btn_mini_red"
                                                                        onclick="cancelAdd()">
                                                                    取消
                                                                </button>
                                                            </form>
                                                        </div>

                                                    </div>

                                                </li>

                                            </ul>
                                            <br/>
                                            <br/>
                                        </fieldset>
                                        </form>
                                    </div>
                                </div>
                                <div class="col2-set">
                                    <div class="col-1">
                                    </div>
                                    <div class="col-2">
                                        <div class="buttons-set"><a class="fl_right" href="#"></a>
                                            <button class="button brown_btn" onclick="topay();" type="button">确定
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ol>
                </div>
                <!--CHECKOUT STEPS ENDS-->
                <div class="col_right">
                    <div class="block-progress">
                        <div class="block-title">结账流程</div>
                        <ul>
                            <li>>提交订单</li>
                            <li>>填写地址</li>
                            <li>>付款</li>
                            <li>>等待收货</li>
                        </ul>
                    </div>
                    <div class="right_promo">
                        <img src="/sale/resources/images/side_promo_banner.jpg"/>
                    </div>
                </div>
            </div>
        </section>
        <!--Mid Section Ends-->
    </div>
    <jsp:include page="common/buttom.jsp" flush="true"/>
</div>
</body>
<script>
    document.getElementById('editForm').style.display = 'none';
    document.getElementById('addForm').style.display = 'none';

    function editAddress(id, phoneNumber, name) {
        document.getElementById('editId').value = id;
        document.getElementById('editPhoneNumber').value = phoneNumber;
        document.getElementById('editName').value = name;
        document.getElementById('editForm').style.display = 'block';
        document.getElementById('addForm').style.display = 'none';
    }

    function cancelEdit() {
        document.getElementById('editForm').style.display = 'none';
    }

    function showAddForm() {
        document.getElementById('addForm').style.display = 'block';
        document.getElementById('editForm').style.display = 'none';
    }

    function cancelAdd() {
        document.getElementById('addForm').style.display = 'none';
    }


    function deleteAddress(id) {
        if (confirm('确定要删除此地址吗？')) {
            // 创建表单动态提交删除请求
            const form = document.createElement('form');
            form.method = 'post';
            form.action = '/deleteAddress';
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'id';
            input.value = id;
            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
</html>